<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代理授权证书</title>
<style type="text/css">
.content {
	width: 1024px;
	height: 723px;
	margin-top: 45px;
	margin-left: 0px;
	border: solid 1px chartreuse;
	background: url("/img/auth.jpg") no-repeat center center;
	background-size: 100%;
	font-family: "微软雅黑", "黑体", "新宋体", "Arial Unicode MS";
}

.page {
	margin: auto;
	margin-top: 200px;
}
/*编号*/
.font01 {
	float: right;
	margin-right: 120px;
	margin-top: 30px;
	font-size: 12px;
}

.font01 input {
	background-color: transparent;
	font-size: 12px;
	color: #8D8D8D;
}
/*主文本*/
.font02 {
	width: 80%;
	margin-top: 30px;
	float: left;
	margin-left: 115px;
	word-break: break-all;
	overflow: hidden;
	font-size: 24px;
	text-indent:2em;
}

.font02 input {
	width: 250px;
}
/*授权日期*/
.font03 {
	float: right;
	margin-right: 55px;
	margin-top: 5px;
	line-height: 2;
}

/*签名*/
.qian {
	float: left;
	margin-top: 180px;
	margin-left: 525px;
}
/*备注*/
.font04 {
	float: left;
	font-size: 12px;
	margin-top: 1px;
	margin-left: 150px;
}

input {
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-width: 0px;
	width: 72px;
	font-size: 24px;
	text-align: center;
	background-color: transparent;
	color: #000010;
	border-color: #000010;
}

#canvas {
	width: 200px;
	height: 200px;
	float: right;
	margin-right: 110px;
	margin-top: -170px;
}
</style>
<link href="/css/buttons.css" rel="stylesheet">

</head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/chajian_yinzhang.js"></script>
<script type="text/javascript" src="/js/html2canvas/base64.js"></script>
<script type="text/javascript" src="/js/html2canvas/canvas2image.js"></script>
<script type="text/javascript" src="/js/html2canvas/html2canvas.min.js"></script>
<body>
	<div th:if="${role eq 0}">
		<h3 style="text-align: center">暂无证书.升级代理即可颁发证书</h3>
	</div>
	<div th:if="${role eq 1}">
		<a class="button button-3d button-action button-rounded" id="btnSave">生成图片</a>
		<a class="button button-3d button-primary button-rounded"
			id="Download">下载授权图片</a> <a>温馨提示：需要下载授权证书的用户，第一步：先点击生成图片，然后在预览区查看，可以直接右键保存至本地
			第二步：点击下载授权图片即可</a>
		<div style="display: flex">
			<div class="content" id="content">
				<div class="page">
					<form method="post">
						<br> <font class="font01">授权证书编号:<span
							th:text="${auth.authNo}">20180721163417256</span></font> <font class="font02">
						<p>兹授权<a style="border-bottom:2px solid black;margin-left: 16px;margin-right: 16px;font-family: '新宋体';font-size: 1.3rem;"
								 th:text="${auth.company}">速用111速用111速用111</a><label>（公司/个体户/个人）</label>
							开展旗下&nbsp;<span style="border-bottom:2px solid black;font-family: '新宋体';
    font-size: 1.3rem;">微信小程序、社交广告、移动支付 经营业务</span>
						</p>
						<p>特此授权！</p>
						</font><br> <br> <br> <br> <font class="font03">授权时间：<label><a
								th:text="${auth.startYear}"></a>年</label> <label><a
								th:text="${auth.startMonth}"></a>月</label> <label><a
								th:text="${auth.startDay}"></a>日</label>至 <label><a
								th:text="${auth.endYear}"></a>年</label> <label><a
								th:text="${auth.endMonth}"></a>月</label> <label><a
								th:text="${auth.endDay}"></a>日</label>
								<br>授权企业：<label>广州速用网络科技有限公司</label>
							<br> 法定代表人：叶舟<br> (签名)公章 :<br></font>
						<!--<font class="qian"
							style="margin-top: 10px; margin-left: 595px"><br></font><br>-->
						<div style="clear: both"></div>
						<font class="font04">备注：广州速用网络科技有限公司拥有本授权最终解释权！公司官网：www.suyongw.com</font>
						<div style="clear: both"></div>
						<canvas id="canvas" width="200px" height="200px"
							style="margin-right: 95px"></canvas>
					</form>

				</div>

			</div>
			<div id="images"
				style="width: 190px; height: 302px; float: left; text-align: center; line-height: 302px; margin-top: 45px;"></div>
		</div>

	</div>
</body>

<script th:inline="javascript">
	window.onload = function() {
		myBrowser()
	}
	//判断浏览器类型
	function myBrowser() {
		var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
		var isOpera = userAgent.indexOf("Opera") > -1;
		if (isOpera) {
			return "Opera"
		}
		; //判断是否Opera浏览器
		if (userAgent.indexOf("Firefox") > -1) {
			return "FF";
		} //判断是否Firefox浏览器
		if (userAgent.indexOf("Chrome") > -1) {
			return "Chrome";
		}
		if (userAgent.indexOf("Safari") > -1) {
			return "Safari";
		} //判断是否Safari浏览器
		if (userAgent.indexOf("compatible") > -1
				&& userAgent.indexOf("MSIE") > -1 && !isOpera) {
			return "IE";
		}
		; //判断是否IE浏览器
		if (userAgent.indexOf("Trident") > -1) {

			return "Edge";
		} //判断是否Edge浏览器
	}

	var canvas = document.getElementById("canvas");
	var context = canvas.getContext('2d');
	var text = "授权专用章 ";
	var companyName = "广州速用网络科技有限公司";

	// 绘制印章边框
	var width = canvas.width / 2;
	var height = canvas.height / 2;
	context.lineWidth = 5;
	context.strokeStyle = "#f00";
	context.beginPath();
	context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径
	context.stroke();

	//画五角星
	create5star(context, width, height, 25, "#f00", 0);

	// 绘制印章名称
	context.font = '20px 宋体';
	context.textBaseline = 'middle';//设置文本的垂直对齐方式
	context.textAlign = 'center'; //设置文本的水平对对齐方式
	context.lineWidth = 1;
	context.strokeStyle = '#f00';
	context.strokeText(text, width, height + 60);

	// 绘制印章单位
	context.translate(width, height);// 平移到此位置,
	context.font = '23px 宋体'
	var count = companyName.length;// 字数
	var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度
	var chars = companyName.split("");
	var c;
	for (var i = 0; i < count; i++) {
		c = chars[i];// 需要绘制的字符
		if (i == 0) {
			context.rotate(5 * Math.PI / 6);
		} else {
			context.rotate(angle);
		}
		context.save();
		context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
		context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
		context.strokeText(c, 0, 0);// 此点为字的中心点
		context.restore();
	}

	/**
	 * 绘制五角星
	 * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
	 * rotate:绕对称轴旋转rotate弧度
	 */
	function create5star(context, sx, sy, radius, color, rotato) {
		context.save();
		context.fillStyle = color;
		context.translate(sx, sy);//移动坐标原点
		context.rotate(Math.PI + rotato);//旋转
		context.beginPath();//创建路径
		var x = Math.sin(0);
		var y = Math.cos(0);
		var dig = Math.PI / 5 * 4;
		for (var i = 0; i < 5; i++) {//画五角星的五条边
			var x = Math.sin(i * dig);
			var y = Math.cos(i * dig);
			context.lineTo(x * radius, y * radius);
		}
		context.closePath();
		context.stroke();
		context.fill();
		context.restore();
	}

	/*生成canvas图形*/

	// 获取按钮id
	var btnSave = document.getElementById("btnSave");
	// 获取内容id
	var content = document.getElementById("content");
	// 进行canvas生成
	btnSave.onclick = function() {
		html2canvas(content, {
			onrendered : function(canvas) {
				//添加属性
				canvas.setAttribute('id', 'thecanvas');
				//读取属性值
				// var value= canvas.getAttribute('id');
				document.getElementById('images').innerHTML = '';
				document.getElementById('images').appendChild(canvas);
			}
		});
	}

	//IE浏览器图片保存本地
	function SaveAs5() {
		html2canvas(content, {
			onrendered : function(canvas) {
				var blob = canvas.msToBlob();
				window.navigator.msSaveBlob(blob, 'a.png')
			}
		});
	}

	/*
	 * 说明
	 * 不支持跨域图片
	 * 不能在浏览器插件中使用
	 * 部分浏览器上不支持SVG图片
	 * 不支持Flash
	 */
	var Download = document.getElementById("Download");
	Download.onclick = function() {
		var oCanvas = document.getElementById("thecanvas");

		/*自动保存为png*/
		// 获取图片资源
		var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute(
				'src');
		if (myBrowser() === "IE" || myBrowser() === "Edge") {
			SaveAs5();

		} else {
			saveFile(img_data1, 'myauth.png');
		}

		/*下面的为原生的保存，不带格式名*/
		// 这将会提示用户保存PNG图片
		// Canvas2Image.saveAsPNG(oCanvas);
	}
	// 保存文件函数
	var saveFile = function(data, filename) {
		var save_link = document.createElementNS(
				'http://www.w3.org/1999/xhtml', 'a');
		save_link.href = data;
		save_link.download = filename;

		var event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0,
				false, false, false, false, 0, null);
		save_link.dispatchEvent(event);
	};
</script>


</html>

